<template>
	<view class="mobile-item-container gradient-background">
		<Navbar title="学习任务" bgColor="transparent" :h5Show="false"></Navbar>
		<!-- 		<u-row style="background-color: #effff8; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);border-radius:10px;">
          <u-col style="text-align: center; padding: 10px;" span="4">今日复习</u-col>
          <u-col style="text-align: center; padding: 10px;" span="4">今日新词</u-col>
          <u-col style="text-align: center; padding: 10px;" span="4">学习时间</u-col>
        </u-row> -->

		<view v-if="show">
			<view>
				<u-row style="margin-top: 20%;">
					<u-col style="text-align: center;font-size: 24px;" span="12"><b>{{ data.english }}</b></u-col>
				</u-row>
				<view style="text-align: center;">
					<span style="display: inline-block;font-size: 12px;">{{ data.phoneticSymbol }}</span>
					<PlayAudio ref="ad" size="12px" style="display: inline-block;margin-left: 5px;" :path ="data.voiceFilesPath" ></PlayAudio>
				</view>
			</view>
			<view v-show="!isShow"
				style="margin-top: 20%; display: flex; justify-content: center;background-color: #f0f0f0;border-radius:10px;padding-top: 10px;padding-bottom: 10px;">
				<view style="width: 80%;text-align: center;">
					<u-row>
						<u-col span="12">
							<u--text type="info" size="8" text="例句"></u--text>
						</u-col>
					</u-row>
					<u-row>
						<u-col span="12">
							<u--text bold size="12" :text="data.exampleSentenceHero"></u--text>
						</u-col>
					</u-row>
				</view>
			</view>
			<view v-show="isShow" @click="definition()"
				style="height: 30%;margin-top: 10%;text-align: center;font-size: 10px;color: #787d71;">
				尝试回想释义<br>点击可查看释义
			</view>
			<u-row class="button-container">
				<u-col style="text-align: center;" span="5.5">
					<u-button class="button-objs" style="height: 100px;width: 100px;" @click="toDetail(1)"
						type="warning" :plain="true" :hairline="true" text="不认识"></u-button>
				</u-col>
				<u-col span="1"></u-col>
				<u-col style="text-align: center;" span="5.5">
					<u-button class="button-objs" @click="toDetail(2)" type="success" :plain="true"
						:hairline="true" text="我认识"></u-button>
				</u-col>
			</u-row>
		</view>
		<view v-else>
			<view style="display: flex; justify-content: space-between;">
				<u--text bold size="30" :text="data.english"></u--text>
				<PlayAudio size="24px" :path ="data.voiceFilesPath"></PlayAudio>
			</view>
			<view style="margin-top: 5px;">
				<u--text type="info" size="16" :text="data.phoneticSymbol"></u--text>
			</view>
			<u-list v-if="data.partOfSpeechSelectList" height="auto" style="margin-top: 18px;padding-left: 5px;" key="activeKey" >
				<u-list-item v-for="(item, index) in data.partOfSpeechSelectList" :key="index">
					<view style="display: flex; align-items: center;margin-bottom: 2px;">
						<view style="font-size: 12px;color: #9093b3;padding-right: 20px;">{{item.partOfSpeech}}</view>
						<u--text bold size="16" :text="item.meaningInChinese"></u--text>
					</view>
				</u-list-item>
			</u-list>

			<view style="margin-top: 10px;">
				<view style="font-size: 12px;color: #9093b3;">【例句】</view>
				<u--text style="padding-left: 5px;" bold size="14" :text="data.exampleSentenceHero"></u--text>
				<u--text style="padding-left: 5px;" bold type="info" size="14" :text="data.exampleSentenceMiddle"></u--text>
			</view>
			
			<view class="button-container">
				<u-button v-show="!wc" class="button" type="success" shape="circle" @click="loadData()">下一个</u-button>
				<u-button v-show="wc" class="button" type="success" shape="circle" @click="redirectTo()">完成</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import Navbar from '@/components/navbar/Navbar'
	import * as IndexApi from '@/api/index'
	import PlayAudio from './playAudio'

	export default {
		components: {
			Navbar,
			PlayAudio,
		},
		data() {
			return {
				id: null,
				isShow: true,
				params: {
					pageNum: 0,
					pageSize: 10
				},
				list: [],
				data: {},
				play: false,
				show: true,
				wc: false,
			}
		},
		created() {
		},
		onLoad(params) {
			this.id = params.id;
			this.loadData();
		},
		methods: {
			loadData() {
				//通过课程id 加载一个题目
				IndexApi.learningMaterialsListById(this.id).then(res => {
					console.log("res.data----", res.data);
					if(res.data){
						IndexApi.learningMaterials(res.data.id).then(res => {
							console.log("res", res);
							this.data = res.data;
							this.show = true;
							this.$nextTick(() => {
							  this.$refs.ad.playAudio();
							});
						})
					}else{
						this.wc = true;
					}
				})
			},
			// 显示释义
			definition() {
				this.isShow = false;
			},
			toDetail(type) {
				if (type == 2) {
					IndexApi.insertCourseLearning({
						courseId: this.data.courseId,
						learningMaterialsId: this.data.id,
					})
				}
				this.show = false;
			},
			redirectTo() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.button-objs {
		height: 100px;
		width: 100px;
	}

	.button-container {
		display: flex;
		align-items: center;
		position: fixed;
		width: 100%;
		bottom: 50px;
		/* 距离屏幕底部的距离 */
		left: 50%;
		/* 按钮居中 */
		transform: translateX(-50%);
	}
	.button {
		font-size: 16px;
		width: 90%;
		background: linear-gradient(145deg, #80c0be, #4c9480);
		border: none;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	}
</style>